<script setup lang="ts">
const colorMode = useColorMode()
const user = useUserStore()

import {useMessage} from 'naive-ui'

const message = useMessage()

const authFlag = ref(false)
const searchFlag = ref(false)

const colorModeIcon = ref('i-heroicons-sun-20-solid')

const changeColorMode = (event: Event) => {
  console.log(colorMode.preference)
  colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
  colorModeIcon.value = colorMode.preference === 'dark' ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'
}

const signSuccess = () => {
  authFlag.value = false
}

const logout = async () => {
  message.success("你已退出登陆")
  try {
    await user.signOut()
  } catch (e) {
    // console.error(e)
  }
  // setTimeout(() => {
  //   loginFormType.value = 'signIn'
  //   menuFlag.value = false
  // }, 500)
}

const items = [
  [
    {
      label: '用户中心',
      icon: '',
      slot: 'account',
      avatar: {src: user.avatar},
      click: () => message.warning('正在加班加点开发中...')
    },
    {
      label: "通知和消息",
      icon: '',
      click: () => message.warning('正在加班加点开发中...')
    }
  ],
  [
    {
      label: "退出登陆",
      icon: 'i-heroicons-arrow-up-tray-20-solid',
      click: logout
    }
  ]
]

</script>

<template>
  <header class="bg-background/75 backdrop-blur border-b -mb-px sticky top-0 z-50 border-gray-200 dark:border-gray-800">

    <div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl flex items-center justify-between gap-3 h-[--header-height]">

      <div class="lg:flex-1 flex items-center gap-1.5">
        <nuxt-link to="/" class="flex items-center gap-2 font-bold text-xl text-gray-900 dark:text-white">
          <img src="~/assets/logo.png" alt="logo" class="w-8 h-8">
          小熊文案馆
        </nuxt-link>
      </div>
      <div class="flex items-center justify-end lg:flex-1 gap-1.5">
        <UButton
            icon="i-heroicons-magnifying-glass-20-solid"
            class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
            size="sm"
            square
            :padded="true"
            variant="link"
            @click="searchFlag = true"
        />
        <UButton
            @click="changeColorMode"
            :icon="colorModeIcon"
            class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
            size="sm"
            square
            :padded="true"
            variant="link"
        />
        <UButton
            v-if="user._id == ''"
            icon="i-heroicons-user-circle"
            size="xs"
            color="primary"
            variant="solid"
            label="登录注册"
            :trailing="false"
            @click="authFlag = true"
        />
        <template v-else>
          <UDropdown class="lg:flex" mode="hover" :items="items"
                     :popper="{ arrow: true, placement:'bottom' }">
            <UButton :label="`Hi, ${hideMobile(user.nickname)}`" color="gray" variant="ghost">
              <template #leading>
                <UAvatar
                    chip-color="primary"
                    chip-text=""
                    chip-position="bottom-right"
                    :src="user.avatar"
                    size="xs"
                />
              </template>
            </UButton>
            <template #item="{ item }">
              <span class="truncate">{{ item.label }}</span>
              <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
            </template>
          </UDropdown>
          <UAvatar
              :src="user.avatar"
              class="lg:hidden"
          />
        </template>
      </div>
    </div>
    <UModal v-model="authFlag" :ui="{ width: 'w-full sm:max-w-sm' }">
      <div class="p-10">
        <SignIn @success="signSuccess"/>
      </div>
    </UModal>
    <UModal v-model="searchFlag" :ui="{ width: 'w-full sm:max-w-3xl', height: 'h-dvh sm:h-[28rem]'}">
      <Search @close="searchFlag = false"/>
    </UModal>
  </header>
</template>

<style lang="scss" scoped>
.custom-width {
  max-width: 500px; /* 自定义宽度 */
}

.custom-height {
  max-height: 400px; /* 自定义高度 */
}
</style>